<template>
  <div class="statistics-card" :style="`background-color: ${bg}`">
    <div class="total">{{ total }}</div>
    <div class="tip">{{ tip }}</div>
  </div>
</template>
<script>
export default {
  name: "StatisticsCard",
  props: {
    total: Number,
    tip: String,
    bg: String
  },
  data() {
    return {};
  },
  created() {},
  methods: {}
};
</script>
<style lang="scss">
.statistics-card {
  height: 160px;
  overflow: hidden;
  border-radius: 10px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  .total {
    font-size: 32px;
    color: #ffffff;
  }
  .tip {
    font-size: 14px;
    color: #ffffff;
  }
}
</style>
